<template>
    <div class="con">
        <div class="mix">
            <div class="top">
                <span style="color:red">编辑</span>
                <span>购物车</span>
                <span></span>
            </div>
            <div v-for="(item,index) in $store.state.arr" :key="index">
                <van-checkbox v-model="item.done" @change="change"></van-checkbox>
                <van-swipe-cell>
                    <van-card :num="item.item.num" :price="item.item.jiage" :desc="item.item.guige"
                        :title="item.item.title" class="goods-card" :thumb="item.item.img">
                        <!-- <template #num>
                            <van-stepper v-model="item.item.num" @change="v(item.item.num)" />
                        </template> -->
                    </van-card>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </div>
            <van-empty class="custom-image" v-if="$store.state.arr.length-1<0"
                image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="当前购物车为空" />
            <!-- 猜你喜欢 -->
            <div class="leave">
                <RecommendTui />
            </div>
            <van-submit-bar :price="$store.getters.allprice*100" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="chooseall">全选</van-checkbox>
            </van-submit-bar>

        </div>
    </div>

</template>

<script>
    import RecommendTui from "../components/home/recommend/Recommend-tui"

    export default {

        data() {
            return {

            }
        },
        methods: {
            // v(num) {
            //     this.$store.commit('val',num)
            // },
            onSubmit() {

            },
            change() {
                this.$store.commit('che')
            },

        },
        mounted() {
            // console.log(this.$store.state.arr)
            // this.arr.push(this.$route.query.obj)
            // this.allprice+=parseInt(this.$route.query.obj.jiage)*parseInt(this.$route.query.obj.num)
        },
        computed: {
            chooseall: {
                // 当所有商品都被选中时全选按钮选中
                get() {
                    if (this.$store.state.arr.length == 0) {
                        return false
                    } else {
                        return this.$store.state.arr.every(i => {
                            return i.done == true
                        });
                    }
                },
                // 调用vuex中的set()方法
                set(newVal) {
                    this.$store.commit('chooseall', newVal)
                }
            }
        },
        components: {
            RecommendTui
        }
    };
</script>

<style lang='scss' scoped>
    .con {
        width: 100%;
        height: 100vh;
        overflow: scroll;

        .mix {
            width: 100%;
        }
    }

    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }

    .top {
        width: 100%;
        height: 1rem;
        font-size: 0.35rem;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 0.2rem;

    }
</style>